<template>
  <view class="u-p-20 bg-white page">
    <view class="flex align-center flex-column">
      <image class="record-img" :src="icon" mode="widthFix">
      </image>
      <view class="record-name">
        {{ name }}
        <text class="name-bep" v-if="name == 'USDT'">BEP20</text>
      </view>
      <view class="record-price">{{ balance }}</view>
      <view class="record-group">
        <view class="group-button" @click="handleWithdrawal">转账</view>
        <view class="group-button" @click="handleRecharge">充值</view>
      </view>
    </view>
    <view class="record-box">
      <view class="box-header">交易记录</view>
      <mescroll-body :up="upOption" ref="mescrollRef" :bottombar="false" @init="mescrollInit" @down="downCallback"
        @up="upCallback">
        <view class="box-list">
          <view class="list-item" v-for="(item, index) in recordList" :key="index">
            <view class="item-title">
              <view v-if="item.value !== '0'">
                {{ item.from === walletAddress.toLowerCase() ? '转出' : '转入' }}
              </view>
              <view v-else>智能合约交互</view>
              <view :class='item.from === walletAddress.toLowerCase() ? "title-red" : "title-green"'>
                <view class="title-text">
                  {{ item.from === walletAddress.toLowerCase() ? "-" : "+" }}{{ item.value !== "0" ? getNumber(item.value) :
                    amountFilter(getGasFeeUsed(item), 4) }}
                </view>
              </view>
            </view>
            <view class="item-date">
              {{ dayjs.unix(item.timeStamp).format("YYYY-MM-DD HH:mm:ss") }}
            </view>
          </view>
        </view>
      </mescroll-body>
    </view>
  </view>
</template>

<script>
import {
  mapGetters,
} from 'vuex'
import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
import {
  ServerWalletApi
} from "@/api/modules/ServerWallet.js"
import APP_CONFIG from "@/config/app_config.js"
import dayjs from "dayjs"
import BN from 'bignumber.js';
export default {
  mixins: [MescrollMixin],
  data () {
    return {
      dayjs,
      name: "USDT",
      balance: "0",
      upOption: {
        page: {
          size: 20
        }
      },
      recordList: [],
    }
  },
  onLoad (options) {
    const {
      name,
      balance
    } = options
    name ? this.name = name : null
    balance ? this.balance = balance : null
  },
  computed: {
    ...mapGetters({
      walletAddress: "user/getWalletAddress",
      nftConfig: "user/getNftConfig"
    }),
    icon () {
      const nftConfig = uni.getStorageSync('nftConfig')
      const index = nftConfig.tokens.findIndex(item => item.name == this.name)
      return nftConfig.tokens[index].icon || ''
    }
  },
  methods: {
    getNumber () {
      const BALANCE_BASE = new BN(10).pow(18);
      const num = new BN(value).div(BALANCE_BASE).toNumber();
      return num
    },
    async upCallback (page) {
      const {
        num,
        size
      } = page
      const nftConfig = uni.getStorageSync('nftConfig')
      const contractaddress = nftConfig.tokens.find(item => item.name == this.name).contract || ''
      const params = {
        contractaddress,
        address: this.walletAddress,
        page: num,
        offset: size,
        config_type: APP_CONFIG.config_type
      }
      const res = await ServerWalletApi.getHistory(params)
      if (res.status == 1)
      {
        if (num == 1) this.recordList = [];
        this.recordList = this.recordList.concat(res.result)
        this.mescroll.endBySize(res.result.length, res.result.length)
      } else
      {
        this.$Toast(res.message)
        this.mescroll.endErr()
      }
    },
    handleRecharge () {
      uni.navigateTo({
        url: "/pages/mine/mineBalance/asset/recharge"
      })
    },
    handleWithdrawal () {
      uni.navigateTo({
        url: `/pages/mine/mineBalance/asset/withdrawal?token=${this.name}`
      })
    }
  }
}
</script>

<style scoped lang="scss">
.page {
  // #ifdef H5
  min-height: calc(100vh - var(--window-top));
  // #endif
  // #ifndef H5
  min-height: 100vh;
  // #endif
}

.record-img {
  display: block;
  width: 96rpx;
  height: 96rpx;
}

.record-name {
  margin-top: 20rpx;
  text-align: center;
  font-size: 32rpx;
  color: #333;
}

.name-bep {
  color: #ff8819;
  border: 1px solid #ff8819;
  padding: 5rpx 10rpx;
  border-radius: 44rpx;
  margin-left: 10rpx;
}

.record-price {
  margin-top: 20rpx;
  font-size: 32rpx;
}

.record-group {
  margin-top: 25rpx;
  display: flex;
  column-gap: 16rpx;
  width: 100%;

  .group-button {
    flex: 1;
    text-align: center;
    border-radius: 16rpx;
    font-size: 32rpx;
    padding: 20rpx;

    &:first-child {
      color: var(--mainColor);
      background-color: rgba(254, 87, 42, 0.1);
    }

    &:last-child {
      background-color: var(--mainColor);
      color: #fff;
    }
  }
}

.record-box {
  margin-top: 48rpx;
  padding: 18rpx;
  color: #333;

  .box-header {
    font-size: 32rpx;
  }
}

.list-item {
  margin: 40rpx 0;

  .item-title {
    display: flex;
    justify-content: space-between;
    font-size: 28rpx;

    .title-green {
      color: #1bcf63;
    }

    .title-red {
      color: #ff4d4f
    }
  }

  .item-date {
    margin-top: 12rpx;
    font-size: 24rpx;
  }
}

.title-text {
  display: flex;
  align-items: center;
}

.u-empty {
  margin-top: 80px !important;
}</style>